<template>
  <!-- 歌曲列表 -->
  <div class="music"
       v-if="musiclist!=null">
    <table cellspacing='0'>
      <thead>
        <tr>
          <td></td>
          <td>操作</td>
          <td>音乐标题</td>
          <td>歌手</td>
          <td>专辑</td>
          <td>时长</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in musiclist"
            :key="index"
            :class="{backColor:setBackColor(index)}"
            @dblclick="musicItemClick(index)">
          <td :class="{curFont:playIndex==index}">
            {{setSerial(index)}}
            <!-- 播放时，显示为图片，而不是序列号 -->
            <div class="curPlay"
                 v-show="playIndex==index">
              <img src="~assets/img/playmusic/currentplay.svg"
                   alt="">
            </div>
          </td>
          <td>
            <i class="iconfont icon-xihuan"></i>
            <i class="iconfont icon-download-fill"></i>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.artist}}</td>
          <td>{{item.album}}</td>
          <td>{{item.time}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { tableMixin } from 'mixin/tableMixin'
import { playMixin } from 'mixin/playMixin'
export default {
  name: 'MusicItem',
  props: {
    musiclist: {
      type: Array,
      default () {
        return []
      }
    }
  },
  mixins: [tableMixin, playMixin]
}
</script>
<style scoped>
.music {
  width: 100%;
}
.music table {
  width: 100%;
}
.music thead {
  color: #000;
}
.music table tr {
  height: 30px;
  text-align: left;
}
.music table tr:hover {
  background-color: #ddd;
  color: #000;
}
.music thead tr td {
  background-color: #00aa85;
}
.music tbody tr td {
  position: relative;
}
.music tbody {
  font-size: 13px;
  color: #000;
}
.music tr td:nth-child(1) {
  width: 5%;
  text-align: center;
}
.music tr td:nth-child(2) {
  width: 10%;
}
.music tr td:nth-child(2) img {
  width: 20px;
}
.music tbody tr td:nth-child(3) {
  white-space: nowrap;
  /* // 超出的部分...表示 */
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000;
}
.music tr td:nth-child(4) {
  width: 2%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music tr td:nth-child(5) {
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music tr td:nth-child(6) {
  width: 10%;
}
.backColor {
  background: #f7f7f7;
}
.icon-download-fill {
  margin-left: 20px;
  color: #adadad;
}
.icon-xihuan {
  color: #adadad;
}
</style>
